<template>
  <div class="lock" :class="{'locking': msTime.show}">
    <i v-if="!msTime.show && optioning" class="iconfont icon-tongyong_yuntai_icon_caozuoren" :c-tip="optioning" c-tip-placement="top" />
    <span v-if="msTime.show" class="time">{{ msTime.time }}</span>
    <i class="iconfont" :class="msTime.show ? 'icon-tongyong_icon_suoding' : 'icon-tongyong_yuntai_icon_jiesuo'" @click="gotoLockEvents" />
  </div>
</template>
<script>
export default {
  name: 'MvCountDown',
  replace: true,
  data() {
    return {
      msTime: {
        //倒计时数值
        show: false, //倒计时状态
        time: ''
      },
      ct: '', //当前定时任务
    }
  },
  props: {
    locks: {
      type: Map,
    },
    choosedCameraDevice: {
      type: String,
    },
    optioning: {
      type: [String, Boolean],
      default: false
    }
  },
  watch: {
    choosedCameraDevice(val) {
      this.startCountDown();
    },
  },
  beforeDestroy() {
    clearInterval(this.ct) //清除
  },
  methods: {
    gotoLockEvents() {
      this.$emit('gotoLockEvents');
    },
    startCountDown(chooseId = this.choosedCameraDevice) {
      const _this = this;
      clearInterval(_this.ct) //清除
      const lockData = _this.locks.get(chooseId);
      const isStart = lockData?.isStart;
      const endTime = lockData?.endTime;
      _this.msTime.show = !!isStart;
      if(!isStart) {
        return false;
      }
      if(Date.now() >= endTime) {
        return false;
      }
      _this.ct = setInterval(function count() {
        const over = parseInt(endTime / 1000) - parseInt(Date.now() / 1000);
        if(over <= 0) {
          clearInterval(_this.ct);
          _this.msTime.show = false;
          _this.$parent.gotoLockEvents(chooseId);
          return false;
        }
        const h = parseInt(over / 3600);
        const m = parseInt(over % 3600 / 60);
        const s = over % 3600 % 60;

        let cloudLockTime = `${ String(m).padStart(2, 0) }:${ String(s).padStart(2, 0) }`;
        if(h > 0) {
          cloudLockTime = `${ String(h).padStart(2, 0) }:${ cloudLockTime }`;
        }
        _this.msTime.time = cloudLockTime;
        return count;
      }(), 1000);
    },
  }
}
</script>
<style lang="scss" scoped>
.lock{
  width: 108px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 6px 0 12px;
  border-radius: 4px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  i{
    font-size: 20px;
    color: #E8F3FE;
    cursor: pointer;
    margin-left: 6px;
  }
  .time{
    font-size: 14px;
    color: rgba(232,243,254,0.7);
  }
  &.locking{
    justify-content: space-between;
    background: rgba(79,159,255,0.2);
  }
}
</style>
<style lang="scss" scoped>
.g{
  .lock{
    i{
      color: #FFEEB1;
    }
    .time{
      color: rgba(228,231,193,0.7);
    }
    &.locking{
      background: rgba(100, 86, 46, 0.4);
    }
  }
}
</style>
<style lang="scss" scoped>
.l2{
  .lock{
    i{
      color: rgba(255,255,255,0.6);
    }
    .time{
      color: rgba(255,255,255,0.7);
    }
    &.locking{
      background: rgba(2,137,109,0.2);
    }
  }
}
</style>
